<html>

<head>
    <link rel="stylesheet" href="../../normalize.css">
    <link rel="stylesheet" href="../../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="components-demo">
        <!--静态赋值-->
        <blog-post title="My journey with Vue"></blog-post>

        <!-- 动态赋予一个变量的值 -->
        <blog-post v-bind:title="post.title"></blog-post>

        <!-- 动态赋予一个复杂表达式的值 -->
        <blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>
    </div>
</body>

<script type="text/javascript">
    Vue.component('blog-post', {
        props: ['title'],
        template: '<h3>test {{ title }}</h3>'
    })
    new Vue({
        el: '#components-demo',
        data: {
            post: {
                title: "justin bieber is so hot",
                author: {
                    name: "justin bieber`s girlfriend"
                }
            }
        }
    });

</script>

</html>